import React from 'react'
import {
  View,
  ListView,
  TouchableOpacity,
  Text,
  Image,
  StyleSheet,
} from 'react-native'
import theme from '../../theme'
import {
  windowWidth,
} from '../../../util/dimension'
const {
  FIRST_FONT,
  THIRD_FONT,
} = theme
const titleImgSize = 76
const rowPaddingHorizontal = 16
const titleWidth = windowWidth() - (titleImgSize + rowPaddingHorizontal*2 + 5 )
const styles = StyleSheet.create({
  row:{
    paddingHorizontal:rowPaddingHorizontal,
    paddingVertical:20,
    marginTop:100,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
  },
  header:{
    flexDirection:'row',
    alignItems:'center',
    marginBottom: 8,
  },
  headerImg:{
    borderRadius:18,
    width:36,
    height:36,
  },
  headerName:{
    color:FIRST_FONT,
    marginLeft:10,
    fontWeight:'500',
    fontSize:16,
  },
  headerTime:{
    color:THIRD_FONT,
    marginLeft:8,
    fontSize:16,
  },
  title:{
    width:titleWidth,
    color:FIRST_FONT,
    fontSize:20,
  },
  titleWithoutImg:{
    color:FIRST_FONT,
    fontSize:20,
  },
  titleImg:{
    width:titleImgSize,
    height:titleImgSize,
    borderRadius:4,
  },
})
const rowStyles = StyleSheet.create({

})
const _renderRow = (data) => {
  return (
    <TouchableOpacity
      style={styles.row}
      >
      <View>
        <View style={styles.header}>
          <Image
            style={styles.headerImg}
            source={{uri:"http://tva2.sinaimg.cn/crop.3.0.634.634.1024/cd516b22jw8fa4mlfynwzj20hs0hm0tr.jpg"}}
            />
          <Text style={styles.headerName}>Name</Text>
          <Text style={styles.headerTime}>8小时前</Text>
        </View>
        <View>
          <Text
            style={styles.titleWithoutImg}
            numberOfLines={2}
            ellipsizeMode='tail'
            >那些不得其死的诗人那些不得其死的诗ddddd人那些不得其死的诗人那些不得其死的诗人</Text>
        </View>
      </View>
    </TouchableOpacity>
  )
  return (
    <TouchableOpacity style={styles.row}>
      <View>
        <View style={styles.header}>
          <Image
            style={styles.headerImg}
            source={{uri:"http://tva2.sinaimg.cn/crop.3.0.634.634.1024/cd516b22jw8fa4mlfynwzj20hs0hm0tr.jpg"}}
            />
          <Text style={styles.headerName}>Name</Text>
          <Text style={styles.headerTime}>8小时前</Text>
        </View>
        <View>
          <Text
            style={styles.title}
            numberOfLines={2}
            ellipsizeMode='tail'
            >那些不得其死的诗人那些不得其死的诗人那些不得其死的诗人那些不得其死的诗人</Text>
        </View>
      </View>
      <View>
        <Image
          style={styles.titleImg}
          source={{uri:"http://img3.duitang.com/uploads/item/201608/21/20160821200538_vHxLi.thumb.700_0.jpeg"}}
          />
      </View>
    </TouchableOpacity>
  )
}
const StoryList = React.createClass({
  getInitialState(){
    return {
      dataSource:new ListView.DataSource({
        rowHasChanged: (r1,r2) => r1 !== r2
      }).cloneWithRows([1]),
    }
  },

  render(){
    const {
      dataSource,
    } = this.state
    return (
      <ListView
        dataSource={dataSource}
        renderRow={_renderRow}
        />
    )
  },
})

export default StoryList
